<template>
  <div id="map-container">
    <!-- 搜索输入框：增加清除功能，优化交互 -->
    <el-input v-model="searchKeyword" placeholder="搜索位置" id="tipinput" suffix-icon="el-icon-search"
      v-if="choose"></el-input>
    <!-- 清空搜索 -->
    <!-- clearable
    @clear="handleSearchClear"-->
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "Amap",
  props: {
    // 支持父组件传入默认坐标（可选）
    defaultLnglat: {
      type: Array,
      default: () => [114.268691, 30.401227] // 默认武汉坐标
    },
    choose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      map: null, // 地图实例
      lnglat: [], // 选中的经纬度 [lng, lat]
      markers: [], // 标记点数组（用于后续清理）
      searchKeyword: "", // 搜索关键词绑定（原代码缺失，导致清空功能无效）
      auto: null, // 自动完成实例
      placeSearch: null // 地点搜索实例
    };
  },
  methods: {
    // 父组件调用：显示弹窗并初始化地图
    init() {
      // 避免重复初始化：若已有地图实例，直接显示即可
      if (this.map) {
        this.map.setCenter(
          this.lnglat.length ? this.lnglat : this.defaultLnglat
        );
        this.setMarker(this.lnglat.length ? this.lnglat : this.defaultLnglat);
        return;
      }
      this.initMap();
    },
    // 初始化地图（核心逻辑）
    initMap() {
      AMapLoader.load({
        key: window.config.key, // 替换为你的高德Key
        version: "2.0",
        plugins: [
          "AMap.AutoComplete", // 自动完成
          "AMap.PlaceSearch", // 地点搜索
          "AMap.Driving", // 驾车路线（预留）
          "AMap.DragRoute", // 拖拽路线（预留）
          "AMap.Geolocation" // 补充：高德定位插件（比浏览器原生定位更稳定）
        ]
      })
        .then(AMap => {
          if (this.choose) {
            // 1. 优先使用高德定位插件（比浏览器原生定位兼容性更好）
            const geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, // 高精度定位
              timeout: 10000, // 超时时间
              buttonOffset: new AMap.Pixel(10, 20) // 定位按钮偏移
            });

            // 2. 执行定位
            geolocation.getCurrentPosition((status, result) => {
              if (status === "complete") {
                // 定位成功：使用当前位置
                const { lng, lat } = result.position;
                this.setDefaultLocation(lng, lat);
              } else {
                // 定位失败：使用默认位置（父组件传入或默认武汉）
                console.log("定位失败，使用默认位置：", result.message);
                this.setDefaultLocation(...this.defaultLnglat);
              }
            });
          } else {
            this.setDefaultLocation(...this.defaultLnglat);
          }
        })
        .catch(error => {
          console.error("地图加载失败：", error);
          this.$message.error("地图加载失败，请刷新页面重试");
        });
    },
    // 设置地图默认位置并初始化地图实例
    setDefaultLocation(longitude, latitude) {
      // 确定最终坐标（避免undefined）
      this.lnglat = [longitude, latitude];

      // 初始化地图容器（确保DOM已存在）
      this.map = new window.AMap.Map("map-container", {
        zoom: 14, // 放大级别（14级更贴近城市街道）
        center: this.lnglat,
        resizeEnable: true // 窗口大小变化时自动调整
      });

      if (this.choose) {
        // 3. 初始化搜索功能
        this.initSearch();

        // 4. 初始化地图点击事件（点击地图选中位置）
        this.map.on("click", this.handleMapClick);
      }

      // 5. 添加默认标记（定位或默认位置）
      this.setMarker(this.lnglat);
    },
    // 初始化搜索功能（自动完成 + 地点搜索）
    initSearch() {
      // 自动完成实例（绑定输入框）
      var mapContainer = document.getElementById("map-container");
      this.auto = new window.AMap.AutoComplete({
        input: "tipinput", // 绑定搜索输入框ID
        city: "", // 空表示全国搜索，可指定城市（如"武汉"）
        output: "poi", // 返回POI（兴趣点）数据
        pageSize: 10, // 搜索结果数量
        container: mapContainer
      });

      // 地点搜索实例（关联地图，搜索结果自动在地图显示）
      this.placeSearch = new window.AMap.PlaceSearch({
        map: this.map,
        pageSize: 5,
        pageIndex: 1,
        cityLimit: false // 是否限制城市内搜索（false为全国）
      });

      // 监听搜索选中事件（点击搜索结果）
      this.auto.on("select", this.handleSearchSelect);
    },
    // 处理搜索结果选中
    handleSearchSelect(e) {
      const { poi } = e;
      if (!poi || !poi.location) return;

      // 1. 更新选中坐标
      this.lnglat = [poi.location.lng, poi.location.lat];

      // 2. 搜索该地点（在地图上显示结果）
      this.placeSearch.setCity(poi.adcode); // 限定城市搜索（提高准确性）
      this.placeSearch.search(poi.name, status => {
        if (status === "complete") {
          // 3. 在搜索结果位置添加标记
          this.setMarker(this.lnglat);
          // 4. 地图居中到搜索结果
          this.map.setCenter(this.lnglat);
        }
      });

      // 5. 更新搜索框关键词（保持同步）
      this.searchKeyword = poi.name;
    },
    // 处理地图点击（点击地图任意位置选中）
    handleMapClick(e) {
      const { lng, lat } = e.lnglat;
      this.lnglat = [lng, lat];
      this.setMarker([lng, lat]); // 添加标记
    },
    // 添加标记点（先清除旧标记，再添加新标记）
    setMarker(lnglat) {
      this.removeMarkers(); // 清除已有标记
      const marker = new window.AMap.Marker({
        position: lnglat,
        icon: new window.AMap.Icon({
          // 自定义标记图标（可选，增强视觉识别）
          size: new window.AMap.Size(36, 48), // 大头针图标通常高度大于宽度
          // 高德官方红色大头针图标地址
          image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
          imageSize: new window.AMap.Size(36, 48) // 与size保持一致
        }),
        title: "选中位置" // 鼠标悬浮显示标题
      });
      marker.setMap(this.map); // 添加到地图
      this.markers.push(marker); // 存入数组，便于后续清理
    },
    // 清除所有标记点
    removeMarkers() {
      if (this.markers.length && this.map) {
        this.map.remove(this.markers); // 从地图移除
        this.markers = []; // 清空数组
      }
    },
    // // 清空搜索框（清除搜索结果和标记）
    // handleSearchClear() {
    //   this.searchKeyword = "";
    //   this.removeMarkers();
    //   this.setMarker(this.lnglat); // 保留当前选中的位置标记
    // },
    // 弹窗关闭前：清理地图资源（防止内存泄漏）
    handleClose() {
      this.removeMarkers(); // 清除标记
      // 销毁地图实例（关键：避免重复初始化导致的叠加问题）
      if (this.map) {
        this.map.destroy();
        this.map = null;
      }
      // 清除搜索实例和事件监听
      if (this.auto) {
        this.auto.off("select", this.handleSearchSelect);
        this.auto = null;
      }
      if (this.placeSearch) {
        this.placeSearch = null;
      }
      // 重置搜索关键词
      this.searchKeyword = "";
    }
  }
};
</script>

<style scoped lang="scss">
#map-container {
  overflow: visible !important;
  width: 100%;
  height: 500px;
  position: relative;

  // 搜索框样式优化（避免遮挡地图控件）
  ::v-deep .el-input {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 280px; // 加宽搜索框
    z-index: 1010 !important;

    .el-input__inner {
      border-radius: 20px; // 圆角优化
      padding-left: 18px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 阴影增强层次感
    }
  }
}
</style>